<template>
  <div class="">
    <diagram :model-data="modelData" />
  </div>
</template>
 
<script>
import diagram from '@/components/goJs/GoDoubleTree.vue'
export default {
  components: { diagram },
  data () {
    return {
      modelData: [
        { key: "Root", color: 'a' },
        { key: "Left1", parent: "Root", dir: "left", color: 'b' },
        { key: "leaf1", parent: "Left1" },
        { key: "leaf2", parent: "Left1" },
        { key: "Left2", parent: "Left1", color: 'b' },
        { key: "leaf3", parent: "Left2" },
        { key: "leaf4", parent: "Left2" },
        { key: "Right2", parent: "leaf3", color: 'c' },
        { key: "Right1", parent: "Root", dir: "right", color: 'c' },
        { key: "Right2", parent: "Right1", color: 'c' },
        { key: "leaf5", parent: "Right2" },
        { key: "leaf6", parent: "Right2" },
        { key: "leaf7", parent: "Right2" },
        { key: "leaf8", parent: "Right1" },
        { key: "leaf9", parent: "Right1" },
        { key: "Right2", parent: "leaf9" }
      ]
    }
  },
  methods: {
    model: function () {
      return this.$refs.diag.model()
    },
    updateDiagramFromData: function () {
      this.$refs.diag.updateDiagramFromData()
    },
  }
}
</script>
 
<style scoped lang="less">
 
</style>